import {ConfigKey} from "../../../script/constant/ConfigConstant";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {PositionConfig, UIConfigKey} from "../../../script/constant/UIConfig";
import {Logger} from "../../../script/frame/apiModel/config/Logger";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, SyncId, UISyncData, View} from "../../../script/frame/apiModel/gui/React";

import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import {EquipBarInterface, EquipInfo, ItemInfo} from "../../interface/GuiInterface";
import {ItemModel} from "../../../script/frame/apiModel/adapterModel/model3/ItemModel";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {publicGui} from "../../interface/PublicGui";
import {InfoPageType} from "../common/InfoPage";
import {DataRouterUtil} from "../../../script/utils/router/DataRouterUtil";
import {CodeUtil} from "../../../script/frame/codeAdapter/CodeUtil";
import {ColorStr, CombinationUIInfo} from "../../../script/type/Type";
import {ItemDataKey} from "../../../script/frame/dataSource/DataSource";
import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import UnitUtil from "../../../script/utils/UnitUtil";


export interface IProp {
    getEquip: (player: PlayerModel) => EquipInfo;
    getCombinationInfoFun: (player: PlayerModel, itemId: string) => CombinationUIInfo;
}
export interface IState {
    goodEquip: ItemInfo[];
    lv: number;
    isOwner: boolean;
}

export default class EquipBar extends EquipBarInterface<IProp, IState> {

    constructor(props: IProp & IProps) {
        super(props);

        this.state = {
            visible: true,
            goodEquip: [],
            lv: 0,
            isOwner: false,
        }
    }

    render = () => {
        const xSpace = 0.005;
        const iconSize = { h: 0.05, w: 0.03 }
        const maxGoodsEquipNum = Configer.getConfig(ConfigKey.maxGoodsEquipNum) as number;
        const backSize = { h: iconSize.h, w: maxGoodsEquipNum * (iconSize.w + xSpace) + 0.001 };

        const backPos = { x: 0.3, y: 0.72 }
        const arrAdapt = Configer.getUIConfig(UIConfigKey.EquipAdapt) as PositionConfig[];

        return <View   key={GuiKeys.equipBarCon} style={{ hidden: !this.state.visible, left: backPos.x, top: backPos.y, width: backSize.w, height: backSize.h }}>
            {
            arrAdapt.map(
                (positionConfig) => {
                    const position = positionConfig.position;
                    const item = this.state.goodEquip && this.state.goodEquip[position];
                    let backgroundImage;
                    if (!CodeUtil.isNullOrZero(item?.strId)) {
                        const itemData = DataRouter.getItemDataByItemId(item.strId);
                        if (itemData) {
                            backgroundImage = DataRouterUtil.getIconUrlByIconData(itemData);
                        }
                    } else {
                        backgroundImage = Configer.getResource(positionConfig.image);
                        if (backgroundImage) {
                        } else {
                            Logger.toastError(`第${position}个部位装备栏贴图为空`);
                            return;
                        }
                    }
                    return <View key={`${GuiKeys.equipBarItem}|${position}`} onMouseDown={() => { return this.unUseItem(position) }} onMouseEnter={(event) => { this.openInfoPage(event.x, event.y, position) }} onMouseLeave={this.closeInfoPage} style={{ width: iconSize.w, height: iconSize.h,backgroundImage: backgroundImage, marginL: xSpace }}></View>
                }
            )
        }
        </View>
    }


    reflushEquipBar = (player: PlayerModel) => {
        const equips = this.props.getEquip(player);
        const items = equips.items;
        const lv = equips.lv;
        const bOwner = equips.isOwner;

        this.setState({
            ...this.state,
            visible: true,
            goodEquip: items,
            lv,
            isOwner: bOwner,
        });
    }

    unUseItem = (index: number) => {
        if (this.state.isOwner) {
            this.closeInfoPage();
            const syncData: UISyncData = { id: SyncId.unUseItem, param: { index: index } };
            return syncData;
        }
        Logger.toastProduct('无法操作其他玩家装备', PlayerFactory.getInstance().getLocalPlayer());
    }

    openInfoPage = (x: number, y: number, index: number) => {
        const item = this.state.goodEquip[index];
        const template = DataRouter.getItemDataByItemId(item?.strId)
        if (template) {
            const combinationUIInfo = this.props.getCombinationInfoFun(PlayerFactory.getInstance().getLocalPlayer(), item?.strId);
            let { title: name, subTitle, des } = DataRouterUtil.getItemInfoDes(item, this.state.lv, combinationUIInfo);

            const fightValue = UnitUtil.getItemFightValue(template, item.affixs);
            const fightValueStr = CodeUtil.getColorStr(ColorStr.blue, '评分: ' + fightValue)
            subTitle = fightValueStr + '\n' + subTitle + '\n';
            publicGui.showInfoPage(x - 0.3, y - 0.2, name, subTitle, des, InfoPageType.pos)
        } else {
            publicGui.closeInfoPage();
        }
    }

    getVisible = () => {
        return this.state.visible;
    }

    closeInfoPage = () => {
        publicGui.closeInfoPage();
    }

}